<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D变换</title><!-- 导航栏开始 -->
    <div class="nav">
        <ul>
            <li>
                <a href="#">导航菜单制作 </a>
                <ul class="a1">
                <li><a href="./键盘焦点.html">键盘焦点</a>
                <li><a href="./billbill效果.html">billbill效果</a>
            </li>
            </ul>
            <li>
                <a href="#">浮动定位</a>
                <ul class="b">
                    <li><a href="./浮动.html">浮动</a></li>
                        <li><a href="./浮动1.html">浮动1</a></li>
                            <li><a href="./浮动2.html">浮动2</a></li>
                            <li><a href="./浮动3.html">浮动3</a></li>
            </li>
            </ul>
            <li>
                <a href="#">购物车图标</a>
                <ul class="c">
                <li><a href="./购物车.html">购物车</a>
            </li>
            </ul>
            <li>
                <a href="#">CSS动画</a>
                <ul class="d">
                <li><a href="./2D效果.html">2D效果</a>
                <li><a href="./3D效果.html">3D效果</a>
                <li><a href="./动画.html">动画</a>
                <li><a href="./立方体.html">立方体</a>
            </li>
        </ul>
        <li>
            <a href="../主页.html">首页</a>
        </li>
        </ul>
    </ul>
    </div>
    <!-- 导航css开始 -->
    <style>
        .nav{
          width: 625px;
          height: 50px;
          margin-top: 1%;
          margin-left: 33%;
          background-color:rgba(0, 0, 0, 0.507);
      }
      ul{
          margin-top: 0px;
          padding-inline-start: 0%;
      }
      .nav>ul>li{
          float: left;
          list-style: none;
          text-align: center;
          height: 50px;
          line-height: 50px;
          width: 125px;
          font-size: 15px;
          font-family: 微软雅黑;
      }
      a{
          color: rgb(255, 255, 255);
          text-decoration: none;
      }
      ul>li:hover{
          background-color:rgb(0, 0, 0);
      }
      .a1{
          list-style: none;
          background-color:rgb(125, 125, 125);
          display: none;
      }
      li:hover>.a1{
          display: block;
      }
      .b{
          list-style: none;
          background-color:rgb(125, 125, 125);
          display: none;
      }
      li:hover>.b{
          display: block;
      }
      .c{
          list-style: none;
          background-color:rgb(125, 125, 125);
          display: none;
      }
      li:hover>.c{
          display: block;
      }
      .d{
          list-style: none;
          background-color:rgb(125, 125, 125);
          display: none;
      }
      li:hover>.d{
          display: block;
      }
      </style>
      <!-- 导航结束 -->
</head>
<body>
    <div class="rotateX" ><h3>X旋转</h3><img src="../img/阮梅.png" alt=""></div>
    <div class="rotateY" ><h3>Y旋转</h3><img src="../img/花火.png" alt=""></div>
    <div class="rotateZ" ><h3>Z旋转</h3><img src="../img/杰帕德.png" alt=""></div>
    <style>
        /* X旋转 */
        .rotateX{
            transition: all 1.5s;
            float: left;
            margin: 10% 2%;
        }
        .rotateX:hover{
            transform: rotateX(150deg);
        }

        /* Y旋转 */
        .rotateY{
            float: left;
            transition: all 1.5s;
            margin: 10% 2%;
        }
        .rotateY:hover{
            transform: rotateY(130deg);
        }

        /* Z旋转 */
        .rotateZ{
            float: left;
            transition: all 1.5s;
            margin: 10% 2%;
        }
        .rotateZ:hover{
            transform: rotateZ(90deg);
        }
        img{
            width: 430px;
            height: 400px;
        }
       body{
        text-align: center;
       }
    </style>
</body>
</html>